react系列（12）React+Webpack的组合搭建

React是纯View层，但在最新的React V16版本中，按传统的纯js脚本开发已经不能适应项目的需要，配合Webpack打包，可以够更便捷地管理项目和更新插件；再者，使用ES6开发，将大大地提高团队地开发效率。本篇主要是介绍如何部署React+Webpack组合搭建，那么我们一步步来吧。

创建一个web项目ReactWebpack，目录结构如图所示：

app目录：存放核心代码。

components目录：存放React组件。

css目录：存放样式文件。

build目录：存放打包编译后的js文件。

index.html：展示页。

main.js：入口js文件。

假设你本机已经安装nodejs，可以使用命令行npm，我用的版本是node-v6.0.0-x64.msi，百度即可下载。

为什么用cnpm？因为cnpm是淘宝npm镜像，下载速度会更流畅，当然也可以使用npm。

安装命令行：

package.json是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等，通过这个文件即可知道您的项目跑起来需要哪些模块库，项目作者、版本等。

在dos环境下，检索至项目根目录，执行命令行：

输入项目名称：react_demo，其它直接enter即可，成功后如图所示：

此时，会在项目的根目录下多了一个package.json文件，文件内容如下：

webpack主要用于对项目的打包和管理，安装成功后，会在项目根目录上多了一个node_modules文件夹，里面是存放所有npm下载的库模块。安装命令行：

安装成功后如图所示：

webpack.config.js是打包配置文件，文件内容如下：

详细的格式我就不解释了，里面都有注释。

执行命令行：

执行命令行：

在项目根目录下新建.babelrc文件，就是只有后缀名的文件，如图所示：

文件内容如下：

Babel其实可以完全在webpack.config.js中进行配置。但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。

新建如下图目录所示文件（其中index.bundle.js为打包时才会有的文件，可以不用新建）：

Component.jsx脚本如下：

color.css脚本如下：

main.js脚本如下：

（注）SayHello.jsx为ES5写法，后面会介绍到。

执行命令行：

（注）监察打包 webpack --watch 其中copy+c结束监察，监察是指只要代码有变动即会自动打包。 打包成功后会在build目录下自动生成一个index.bundle.js文件，打开index.html文件，写入脚本：

打开浏览器运行，运行结果：

至此，我们已经成功部署好了React+Webpack组合开发环境。当然，毕竟并不是所有初学者都学过ES6语法，那么我们可否用ES5组合开发呢？答案是可以的。我们把SayHello.jsx写入脚本如下：

然后更改main.js脚本为：

打包后执行结果（上例中写法2为引入外部组件方式，效果与写法1一致）：

有反馈说根据上面代码敲了一遍，发现打包不了。这是因为我再写这个demo的时候用的是webpack3.x版本，现在最新版本已经是4.23.0，可以通过命令webpack -v查看自己的版本。此处打包建议需要版本一致，所以可修改package.json文件，修改如下：

然后通过命令先把原有node_modules清理：

再重新初始化：

关于使用webpack4.x还有一个地方需要修改，就是该版本不再支持UglifyJs代码压缩方法，所以webpack.config.js文件修改如下：

这样，webpack -d即可打包成功。